import styles from '../index.less';
import React, { useState, useEffect, memo } from 'react';
import kls from 'classnames';
// import Chart3 from './chart3';
import Chart2 from './chart2';
import Chart1 from './chart1';
import VideoBlock from './videoBlock';
import AnotherDeviceList from './another-device-list';
// import { useStatisticsData, updateStatisticsData } from '../index';
// import { useSelector } from 'umi';

const Left = () => {
  // const curProjId = useSelector(store => store.app.curProjId);
  // const [curData, setCurData] = useStatisticsData();
  // useEffect(() => {
  //   curProjId && updateStatisticsData(setCurData, curProjId);
  // }, [curProjId]);

  // console.log(curData);
  return (
    <div className={kls(styles.qualityAndSafetyL)}>
      <div className="side-panel2" style={{ top: 144, left: 24 }}>
        <div className="side-panel2-title">监控信息</div>
        <div className={kls('side-panel2-body auto-height-side-panel')}>
          <div className="side-panel2-subtitle" style={{ paddingTop: 24 }}>
            <div style={{ display: 'inline-flex', justifyContent: 'space-between', width: '92%' }}>
              扬尘监控
              <span style={{ fontSize: 14, opacity: 0.4 }}>单位：mg/m³</span>
            </div>
          </div>
          <Chart1 />

          <div className="side-panel2-subtitle">
            <div style={{ display: 'inline-flex', justifyContent: 'space-between', width: '92%' }}>
              噪声监控
              <span style={{ fontSize: 14, opacity: 0.4 }}>单位：dB</span>
            </div>
          </div>
          <Chart2 />
        </div>
      </div>

      <div className="side-panel2" style={{ bottom: 24, left: 24 }}>
        <div className="side-panel2-title">视频监控</div>
        <div className={kls('side-panel2-body')}>
          <VideoBlock />
        </div>
      </div>

      <div
        className="base-panel"
        style={{ position: 'absolute', bottom: 24, left: 446, width: 'calc(100vw - 472px)' }}
        // style={{ position: 'absolute', bottom: 50, left: 446, width: 'calc(100vw - 896px)' }}
      >
        <div className="base-panel-title" style={{ zIndex: 10, color: 'transparent' }}>
          拌合楼监控-运输车轨迹-地磅数据
        </div>
        <div
          className={kls('base-panel-body')}
          style={{
            overflow: 'visible',
          }}
        >
          <AnotherDeviceList />
        </div>
        <div className="base-panel-after" />
      </div>
    </div>
  );
};

export default Left;
